<!-- 视频播放弹窗 -->
<template>
  <div>
    <el-dialog class="video-dialog" :show-close="false" v-model="dialogVideo" width="70%" :close-on-click-modal="false" center>
      <iframe v-if="dialogVideo" class="video-player" :src="videoAddress" allow="autoplay; fullscreen; microphone;"></iframe>
      <img class="video-off" src="@/assets/images/videoOff.png" @click="dialogVideo = false" />
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  // 视频播放地址
  videoAddress: {
    type: String,
    default: "",
  },
});
const dialogVideo = ref(false); // 弹窗状态
/**
 * 弹窗展示
 * @param value
 */
const show = (value) => {
  dialogVideo.value = value;
};
defineExpose({
  show,
});
</script>
<style scoped lang="less">
// 视频播放弹窗
:deep(.video-dialog) {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
.video-dialog {
  position: relative;
  .video-player {
    width: 100%;
    aspect-ratio: 16/9;
  }
  .video-off {
    position: absolute;
    left: 50%;
    bottom: -70px;
  }
}
</style>
